//美少女,静止模型
import * as THREE from "../node_modules/three/build/three.module.js";
import { GLTFLoader } from "../node_modules/three/examples/jsm/loaders/GLTFLoader";
import { OrbitControls } from "../node_modules/three/examples/jsm/controls/OrbitControls.js";

var scene, camera, light, renderer, loader, controls;

function init() {
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x2c3e50);
  //   let bgTexture = new THREE.TextureLoader().load("../src/img/rick&motty.png");
  //   bgTexture.wrapS = THREE.RepeatWrapping;
  //   bgTexture.wrapT = THREE.RepeatWrapping;
  //   bgTexture.repeat.set(1, 1);
  //   scene.background = bgTexture;

  camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    100
  );
  camera.position.set(0.993, 1.914, 2.248);
  //   camera.lookAt(new THREE.Vector3(1.8, 1.3, 0)); //使用controls.target后camera的lookAt失效

  scene.add(camera);

  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  //跟相机设置冲突
  controls = new OrbitControls(camera, renderer.domElement);
  controls.target = new THREE.Vector3(0.818, 1.314, 0.263);
  controls.update();

  //加载模型
  loader = new GLTFLoader();
  loader.load(
    "../src/models/dancing_girl/scene.gltf",
    function (gltf) {
      scene.add(gltf.scene);
    },
    undefined,
    function (error) {
      console.log(error);
    }
  );

  //模型需要光源照亮,不然是黑乎乎一片(有些材质不需要)
  //   var light = new THREE.AmbientLight(0xe74c3c, 2); // soft white light
  //   scene.add(light);
}

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

function reference() {
  //参考系
  var material1 = new THREE.LineBasicMaterial({ color: 0xd63031 }); //红
  var material2 = new THREE.LineBasicMaterial({ color: 0x55efc4 }); //绿
  var material3 = new THREE.LineBasicMaterial({ color: 0x0984e3 }); //蓝
  var geometry1 = new THREE.Geometry();
  var geometry2 = new THREE.Geometry();
  var geometry3 = new THREE.Geometry();
  geometry1.vertices.push(new THREE.Vector3(0, 0, 0));
  geometry2.vertices.push(new THREE.Vector3(0, 0, 0));
  geometry3.vertices.push(new THREE.Vector3(0, 0, 0));
  geometry1.vertices.push(new THREE.Vector3(10, 0, 0));
  geometry2.vertices.push(new THREE.Vector3(0, 10, 0));
  geometry3.vertices.push(new THREE.Vector3(0, 0, 10));
  var line1 = new THREE.Line(geometry1, material1);
  var line2 = new THREE.Line(geometry2, material2);
  var line3 = new THREE.Line(geometry3, material3);
  scene.add(line1);
  scene.add(line2);
  scene.add(line3);
}

init();
reference();
animate();

//输出camera位置信息,平移相机,设置方块显示位置
document.querySelector("canvas").onclick = function () {
  console.log("controls.target", controls.target);
  console.log("camera.position", camera.position);
};
